<template>
	<div id="mainportal" class="container" v-bind:class="classObject" style="overflow: hidden;    position: fixed;bottom: 0;">
		<div v-if="h5Entrance">
			<comhead ref="comhead" :title="$store.getters.getMerchant.merchantName" isRightIcon="true" rightIconName="ellipsis-h" @rightClick="updataActive()"></comhead>

			<div class="iconImageFather">
				<mt-swipe :auto="4000" style="width:100%;">
					<mt-swipe-item v-for="item in $store.getters.getMerchant.mainBanner.split(',')">
						<img :src='item' style='width:100%;  ' />
					</mt-swipe-item>
				</mt-swipe>
				<div class="tipBtn " v-if="li_bg" @click='goUser()'>
					<span class="meIocn iconfont icon-mine" v-bind:style="{ color: themeColors}"></span>
				</div>
			</div>

			<div>
				<div style='margin:6% 0;'>

					<!-- wx:if="{{vinSearch}}" -->
					<div style="padding: 0 10px;">
						<div v-bind:class="classObject">
							<div style='text-align:center;font-size:16px;padding:1vh 60px 1vh'>
								<div style='border-top: 1px solid  #dfdfdf'>
									<div style='display: flex;justify-content: center;'>
										<div class='bankMessage1'>请选择查询方式</div>
									</div>
								</div>
							</div>
						</div>

						<div class="li-box-cart" v-if="li_bg" @click="goFilterType()">
							<i class="iconfont icon-cheliang-"  v-bind:style="{ color: themeColors}"></i>
							<span>点击选择车型</span>
							<i class="iconfont icon-jiantou"></i>
						</div>

						<div class="li-box-query" v-if="li_bg">
							<div class="qu-left">
								<span></span>
							</div>
							<div class="qu-val">
								<span class="qu-val-or">或</span>
							</div>
							<div class="qu-left">
								<span></span>
							</div>

						</div>
						<div class="li-box-cart" v-if="li_bg" style="padding: 0px;line-height: 30px;" @click="goQueryCar()">
							<i class="iconfont icon-paizhao"  v-bind:style="{ color: themeColors}"></i>
							<span>17位车架号查询</span>
							<button class="" v-bind:style="{ background: themeColors}">下一步</button>
						</div>
						<div style='display:flex;justify-content: space-around;padding:0 20px;flex-wrap:wrap;' v-if="!li_bg">

							<button @click="goFilterType()" plain :style="!$store.getters.getMerchant.vinSearch && !$store.getters.getMerchant.componentSearch?'width:100%;margin:0;color:'+$store.getters.getMerchant.themeColors: 'margin-right:20px;color:'+$store.getters.getMerchant.themeColors" style='font-size:14px;border-color:#e5e5e5;background-color:#fff;border-radius: 5px;margin-left:0;flex:1;'>
        <div style='display: flex; align-items: center;  justify-content: center;    white-space: nowrap;'>
        <i class="iconfont icon-qiche" style="color:#1973bf;height:38px;margin:-6px 10px 0" :style="'color:'+$store.getters.getMerchant.themeColors"></i>
          <span>选择车型</span>
        </div>
      </button>

							<button @click="goQueryCar()" plain v-if="$store.getters.getMerchant.vinSearch" :style=" !$store.getters.getMerchant.vinSearch && $store.getters.getMerchant.componentSearch?'width:100%;margin:0;':''+ 'color:'+$store.getters.getMerchant.themeColors " style='padding:4px 0;width:50%;font-size:14px;border-color:#e5e5e5;background-color:#fff;border-radius: 5px;border-color:#e5e5e5;'>
        <div >
            <div style='display: flex; align-items: center;  justify-content: center;    white-space: nowrap;'>
            <div style='line-height:17px;border-radius: 4rpx;font-size:14px;padding:0 3px;margin:0 3px;'
            :style="'border:1px solid '+$store.getters.getMerchant.themeColors+';color:'+$store.getters.getMerchant.themeColors">VIN</div>
            <span>车架号查询</span>
          </div>
        </div>
      </button>

							<button @click="goOemFilter()" v-if="$store.getters.getMerchant.componentSearch" plain style='padding:4px 0;width:50%;font-size:14px;border-color:#e5e5e5;background-color:#fff;border-radius: 5px;' :style="$store.getters.getMerchant.vinSearch?'width:100%;margin-top:20px;color:'+$store.getters.getMerchant.themeColors :'color:'+$store.getters.getMerchant.themeColors">
        <div style="    white-space: nowrap;">
        <i class="iconfont icon-sousuo" style="height:33px;margin:-6px 10px 0" :style="'color:'+$store.getters.getMerchant.themeColors"></i>
          <span>零件号查询</span>
        </div>
      </button>

						</div>

					</div>
				</div>

				<div class="options" :style="'width:'+ indexIcon.length*22.5+'%'" v-if="!li_bg">
					<div class='box' v-for="n in indexIcon" v-if="n.basicMall" @click='goMenu(n)'>
						<div v-if="n.text != '打电话'">
							<div class='icon_boxFather'>
								<div class='icon_box' :style="'background-color:'+n.color">
									<div style='width:25px;height:25px;'>
										<i class="iconfont " :class="n.icon" style="height:33px;color:#fff;margin: 0;font-size:20px;"></i>
									</div>
									<!-- <img :src='n.icon' style='width:50rpx;height:50rpx' /> -->
									<div class='orderCounts' v-if="n.text === '我的'&& orderCounts!=0"></div>
									<div class='cartCounts' v-if="n.text === '购物车'&& cartCounts!=0">{{cartCounts>99 ?'99':cartCounts}}</div>

								</div>
							</div>
							<div style="color:#666">{{n.text}}</div>
						</div>
						<a :href="'tel:'+$store.getters.getMerchant.contactMobile" v-if="n.text === '打电话'" @click="showNumber()">
							<div class='icon_boxFather'>
								<div class='icon_box' :style="'background-color:'+n.color">
									<div style='width:25px;height:25px;'>

										<i class="iconfont " :class="n.icon" style="height:33px;color:#fff;margin: 0;font-size:20px;"></i>

									</div>
									<!-- <img :src='n.icon' style='width:50rpx;height:50rpx' /> -->
									<div class='orderCounts' v-if="n.text === '我的'&& orderCounts!=0"></div>
									<div class='cartCounts' v-if="n.text === '购物车'&& cartCounts!=0">{{cartCounts>99 ?'99':cartCounts}}</div>

								</div>
							</div>
							<div style="color:#666">{{n.text}}</div>
						</a>
					</div>
				</div>

				<div class="bg_shop1" v-show="statement.status && statementStatus === 'true'" style=' display: flex;z-index: 999;background-color: rgba(0, 0, 0, 0.498039);height: 100vh;width: 100%;'>
					<div style=' width:100%;'>
						<div class="stateMent">
							<div style="padding:6vh 10px;"></div>
							<div style='display:flex;height: 40vh;'>
								<div style="padding:15px;">
									<div style='height:14px;width:14px;background-color:#1973bf;border-radius:10px;'>
									</div>
								</div>
								<div style='max-height: 400px;min-height:130px;padding:5px 30px 5px 0;word-break:break-all;overflow:auto;'>
									{{statement.content}}
								</div>
							</div>
							<div style='padding:20px 10px; display:flex;justify-content: center;'>
								<div style='background-color:#1973bf;
          color:#fff;width:60%;
          display:flex;justify-content: center;
          padding:7px 10px;border-radius:20px;font-size:15px;' @click='toastViewClose()'>
									<div> 同意并继续使用</div>
								</div>
							</div>
						</div>

					</div>

				</div>

			</div>

			<div style='width:100%;color: #999999;font-size:12px;text-align:center;position: fixed;bottom:20px;    max-width: 640px;' v-if="!li_bg">
				由 "汽修宝" 提供技术服务
			</div>

		</div>

		<div class='miniAppsEntrance' v-else>

			{{h5EntranceMessage}}
		</div>
		<div class="li-box-qd" v-if="li_bg && showAbs">
			<img style="width: 100%;height: 100%;" src="http://116.62.22.58:8030/bapi/upload/20180515/file5afaa276db573c6a6df950df.png" />
		</div>
		<!--
        	作者：yang
        	时间：2018-06-19
        	描述：选择地址
        -->	
        <div  v-bind:class="[model?'address-box':'bg_shop_none']" @click="hideAddress">
        	<div class="address-box_containter" v-bind:class="[model?'modiaBoxUp-add':'modiaBoxDown-add']">
        		<div class="add-tit">门店列表<span class="iconfont icon-shanchu" @click.stop.prevent="hideAddress"></span></div>
        		<ul class="add-item">
        			<li v-for="(item,index) in addressList" @click.stop.prevent="getLocal(item)">
        				<div class="li-icon">
        					<span class="iconfont icon-dizhi1"></span>
        				</div>
        				<div class="li-msg">
        					<span class="li-msg-title">{{item.name}}</span>
        					<div class="li-msg-detail textOverflow_2">{{item.address}}</div>
        				</div>
        				<span class="iconfont icon-jiantou li-msg-iconfont">
        					
        				</span>
        			</li>
        			<div v-infinite-scroll="loadMore" v-if="moreLine" infinite-scroll-disabled="busy" infinite-scroll-distance="10"></div>
        			<div class="notMore" v-if="!notMore">我是有底线的</div>
        		</ul>
        		
        		
        	</div>
        </div>
	</div>
</template>

<script>
	import { Toast, Swipe, SwipeItem, Switch, MessageBox } from "mint-ui";
	import { Indicator } from "mint-ui";
	import { Tabbar, TabItem } from "mint-ui";
	import { TabContainer, TabContainerItem } from "mint-ui";
	import comhead from "../../common/coffee/Comhead";

	export default {
		data() {
			return {
				oemSearch: false,
				h5Entrance: false,
				h5EntranceMessage: "商家服务未开通",
				appId: '',
				moreLine: false,
				busy: false,
				model: false,
				statement: {
					content: "",
					createTime: "",
					id: "",
					merchantId: "",
					status: true,
					title: "",
					updateTime: ""
				},
				themeColors:this.$store.getters.getMerchant.themeColors,
				statementStatus: false,
				cartCounts: 0,
				orderCounts: 0,
				addressList: null,
				indexIcon: [{
						icon: "icon-ai-cart",
						text: "购物车",
						color: "#FF7E21",
						url: "/cart",
						basicMall: false
					},
					{
						icon: "icon-dingwei1",
						text: "导航到店",
						color: "#4EC283",
						url: "../location/location",
						basicMall: true
					},
					{
						icon: "icon-dianhua",
						text: "打电话",
						color: "#29B6F6",
						url: "../phone/phone",
						basicMall: true
					},
					{
						icon: "icon-yonghu",
						text: "我的",
						color: "#26A69A",
						url: "/user",
						basicMall: true
					}
				],
				li_bg: false,
				showAbs: false,
				page:0,
				notMore:true,
			};
		},
		computed: {
			classObject: function() {
				return this.li_bg == true ? 'active' : 'not_active'
			}
			
		},
		methods: {
			hideAddress(){
				this.model = false
			},
			loadMore: function (){
				console.log(555)
				if (this.notMore){
					this.page ++;
					this.timer && clearTimeout(this.timer)
			        this.timer = setTimeout(() => {
			            this.getAddressList(true)
			        }, 500)
			    }
			},
			showNumber() {
				MessageBox.alert(this.$store.getters.getMerchant.contactMobile);
			},
			onValuesChange(picker, values) {
				if(values[0] > values[1]) {
					picker.setSlotValue(1, values[0]);
				}
			},
			goOemFilter() {
				if(!this.$store.getters.getLoginStatus.userId) {
					this.$router.push({
						name: "login"
					});
					return;
				}
				this.$router.push("/oemproduct");
			},
			toastViewClose() {
				console.log("11");
				let storage = window.localStorage;
				storage.statementStatus = false;
				this.statement = storage.statement
				this.statementStatus = storage.statementStatus;
			},
			goFilterType() {

				if(
					(this.$store.getters.getMerchant.memberAudit ||
						this.$store.getters.getMerchant.mustLogin) &&
					!this.$store.getters.getLoginStatus.userId
				) {
					this.$router.push({
						name: "login"
					});
					return;
				}
				this.$router.push({
					name: "filtercar"
				});
			},
			goUser() {
				if(!this.$store.getters.getLoginStatus.userId) {
					this.$router.push("/login");
					return
				}
				this.$router.push("/user");
			},
			goMenu(e) {
				console.log(e)
				if(e.url == "../phone/phone") {
					// 打电话 this.$store.getters.getMerchant.contactMobile
					return;
				}

				if(
					(e.url == "/user" || e.url == "/cart") &&
					!this.$store.getters.getLoginStatus.userId
				) {
					this.$router.push("/login");
					return;
				}
				if(e.url === "../location/location") {
					if(
						(this.$store.getters.getMerchant.address || "") == "" ||
						(this.$store.getters.getMerchant.longitude || "") == "" ||
						(this.$store.getters.getMerchant.latitude || "") == ""
					) {
						Toast({
							message: "店铺定位找不到"
						});
					} else {
						if(this.addressList && this.addressList.length>0){
							this.model = true
						}else{
							Toast({
								message: "没有店铺地址"
							});
						}
						
					}
					return;
				}
				this.$router.push(e.url);
			},
			getLocal(item){
				this.false = true
				window.location.href =
							"http://apis.map.qq.com/tools/routeplan/eword=" +
							item.address +
							"&epointx=" +
							item.longitude +
							"&epointy=" +
							item.latitude +
							"?referer=myapp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77";
			},
			getAddressList(replace = false) {
				let self = this;
				let url = this.$baseUrl.bizUrl + "/merchant/front/shop/list";
				let data = {
					  page: this.page,
				      pageSize:20,
				      keyword:'',
				      merchantId: this.$store.getters.getMerchant.merchantId,
				}
				let callBack = (res) =>  {
	            	if(res.status == 200) {
	            		if(replace && res.data.data.shopList.length>0){
	            			this.addressList = this.addressList.concat(res.data.data.shopList)
	            		}else if(replace && res.data.data.shopList.length == 0){
		            		this.notMore = false
		            	}
	            		if(!replace){
	            			this.addressList = res.data.data.shopList
	            			if(res.data.data.page.pageCount == 1 ){
	            				this.notMore = false
	            			}
	            			this.moreLine = true
	            		}
	            		
	            	}
	            	console.log(this.addressList)
	            }
	            self.$reqFormPost(url, data, callBack);
			},
			goQueryCar() {
				if(
					(this.$store.getters.getMerchant.memberAudit ||
						this.$store.getters.getMerchant.mustLogin) &&
					!this.$store.getters.getLoginStatus.userId
				) {
					this.$router.push({
						name: "login"
					});
					return;
				}
				this.$router.push("/querycar");
			},
			getOrderCount() {
				if(!this.$store.getters.getLoginStatus.userId) {
					return;
				}
				let self = this;
				let url = this.$baseUrl.bizUrl + "/user/cart/count";
				let data = {
					token: this.$store.getters.getLoginStatus.token,
					userId: this.$store.getters.getLoginStatus.userId
				};
				let callBack = res => {
					if(res == null) {
						console.log("网络请求错误1！");
						return;
					}

					if(res.data.status != 200) {
						// self.setData({
						//   count: self.data.count + 1
						// });
						// if (self.data.count < 50) {
						//   self.getNameByUserId();
						// }
						return;
					}

					if(res.data.status == 200) {
						this.cartCounts = parseInt(res.data.data.cartCounts);
						this.orderCounts = parseInt(res.data.data.orderCounts);
					}
				};
				this.$reqFormPost(url, data, callBack);
			},
			initPage() {
				let self = this;
				let url = this.$baseUrl.bizUrl + "/merchant/info/byappid";
				let data = {
					appId: window.localStorage.appId
				};

				let callBack = res => {
					if(res == null) {
						console.log("网络请求错误！");
						return;
					}
					if(res.status != 200) {
						console.log("请求数据错误");
						return;
					}
					if(res.status === 200) {
						if(res.data.status != 200) {
							console.log(res.data.message);
							this.h5Entrance = false;
							this.h5EntranceMessage = res.data.message;
							return;
						}

						console.log("取商家", res.data.data);

						this.$store.commit("setMerchant", res.data.data);
						let storage = window.localStorage;
						storage.setItem("merchantInfo", JSON.stringify(res.data.data));
						this.indexIcon[0].basicMall = res.data.data.basicMall;
						this.merchantId = res.data.data.merchantId
						this.li_bg = this.merchantId == 'Mer5af261c3db573c5063f0fdf4' ? true :  this.merchantId == 'Mer5ab5c8abdb573c06b88de8a9' ? true : false

						if(this.merchantId == 'Mer5af261c3db573c5063f0fdf4') {
							this.showAbs = true
						}
						this.getOrderCount();
						setTimeout(() => {
							self.statementStatus = storage.statementStatus;
							self.statement = JSON.parse(storage.statement)
							// this.$refs.comhead.setType(); //页面加载时不能合适进行设置
						}, 1000);
						this.h5Entrance = this.$store.getters.getMerchant.h5Entrance;
						document.title = this.$store.getters.getMerchant.merchantName;
					}
				};
				this.$reqFormPost(url, data, callBack);
			},

		},

		mounted() {

			let Stroge = window.localStorage;

			if(Stroge.appId && Stroge.appId != this.$route.query.validcode) {
				localStorage.clear();
				window.location.reload();
			}
			this.appId = this.$route.query.validcode
			Stroge.appId = this.$route.query.validcode;
			// Stroge.interPage = this.$route.query.type
			//   ? this.$route.query.type
			//   : "public";
			this.initPage();
			this.getAddressList()
			if(!this.$store.getters.getMerchant) {
				window.location.reload();
			}
			
		},

		components: {
			Tabbar,
			TabItem,
			TabContainer,
			TabContainerItem,
			comhead,
			Swipe,
			SwipeItem
		}
	};
</script>
<style>
	.address-box{
		display:flex;
		position:fixed;
		bottom:0;
		z-index:999;
		height:100%;
		width:100%;
		flex-direction: column;
		align-items: flex-end;
		justify-content: flex-end;
		background-color:rgba(0, 0, 0, 0.498039);
	}
	.icon-shanchu{
		position:absolute;
		right:12px;
		top:0px;
		font-size:25px;
		color:#999;

	}
	.address-box_containter{
		width:100%;
		display:flex;
		flex-direction:column;
		background:#fff;
		max-height:360px;
	}
	.add-tit{
		width:100%;
		height:50px;
		line-height:50px;
		text-align:center;
		font-size:14px;
		position:relative;

	}
	.add-item{
		width:100%;
		flex:1;
		overflow:auto;

	}
	.add-item>li{
		width: 100%;
		height: 75px;
		display: flex;
		overflow: hidden;
		box-sizing: border-box;
		flex-direction: row;
	}
	.li-icon{
		min-width:40px;
		display:flex;
		justify-content:center;
		align-items:center;

	}
	.li-msg{
		flex:1;
		display:flex;
		box-sizing: border-box;
		flex-direction:column;
		border-bottom:1px solid #e5e5e5;

	}
	.li-msg-title{
		display:block;
		width:100%;
		height:30px;
		line-height:30px;
		font-size:14px;
		font-weight:bolder;
		overflow: hidden;	
	}
	.bg_shop_none {
	  animation: myfirst2 0.5s;
	}
	.notMore{
	    width: 100%;
	    height: 30px;
	    line-height: 30px;
	    text-align: center;
	    color: #999;

	}
	@keyframes myfirst2 {
	  from {
	  display: flex;
	  }
	
	  to {
	    display: none;
	  }
	}
	.li-msg-detail{
		flex:1;
		font-size:14px;
		overflow:hidden;
		max-height:35px;

	}
	.li-msg-iconfont{
		display:inline-block;
		width:30px;
		display:flex;
		color:#101010;
		font-size:14px;
		justify-content:center;
		align-items:center;
	}
	.textOverflow_2 {
		overflow:hidden;
		text-overflow:ellipsis;
		display:-webkit-box;
		-webkit-line-clamp:2;
		word-wrap:break-word;
		-webkit-box-orient:vertical;

	}
	.icon-dizhi1{
		color: #555;
		font-size: 20px;
	}
	.iconImageFather {
		height: 37vh;
		display: flex;
		align-items: flex-start;
		overflow: hidden;
		position: relative;
	}
	.modiaBoxUp-add {
	  position: fixed;
	  bottom: 0;
	    animation: myfirst 0.5s;
	  -moz-animation: myfirst 0.5s;
	  /* Firefox */
	  -webkit-animation: myfirst 0.5s;
	  /* Safari and Chrome */
	  -o-animation: myfirst 0.5s;
	  /* Opera */
	}
	.modiaBoxDown-add {
	  position: fixed;
	  bottom: -100%;
	  animation: myfirst1 0.5s;
	}
	
	@keyframes myfirst1 {
	  from {
	    bottom: 0;
	  }
	
	  to {
	    bottom: -100%;
	    display: none;
	  }
	}
	@keyframes myfirst {
	  from {
	    bottom: -100%;
	  }
	  to {
	    bottom: 0;
	  }
	}
	
	.li-box-qd {
		width: 100%;
		height: 60px;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}
	
	.li-box-cart {
		width: 100%;
		margin: 20px 0px;
		border: 1px solid #ccc;
		height: 40px;
		display: flex;
		padding: 6px 10px;
		box-sizing: border-box;
		border-radius: 5px;
	}
	
	.li-box-cart>button {
		color: #fff;
		text-align: center;
		height: 100%;
		padding: 0 20px;
		font-size: 14px;
		border-radius: 0px;
		line-height: 40px;
		outline: none;
		border: none;
		background: #36A740;
	}
	
	.li-box-cart>span {
		font-size: 14px;
		display: block;
		flex: 1;
		padding-top: 5px;
		padding-left: 10px;
	}
	
	.icon-paizhao {
		padding: 5px 0px 5px 7px;
		font-size: 14px !important;
		color: #9EA6B7;
	}
	
	.icon-jiantou {
		font-size: 28px;
		color: #999;
		padding-top: 5px;
	}
	
	.icon-cheliang- {
		padding-top: 6px;
	}
	
	.active {
		background: #fff;
	}
	
	.not_active {
		background: #F5F5F5;
	}
	
	.tipBtn {
		right: 0px;
		width: 45px;
		height: 45px;
		top: 0px;
		z-index: 100;
		color: #259B24;
		font-size: 15px;
		position: absolute;
		line-height: 1;
		background: none;
		padding: 0;
		margin: 0;
	}
	
	.meIocn {
		right: 0px;
		top: 10px;
		font-size: 30px !important;
		z-index: 100;
		width: 45px;
		height: 45px;
		color: #36A740;
		position: absolute;
	}
	
	.miniAppsEntrance {
		width: 100%;
		height: 100vh;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
	}
	
	.iconImage {
		width: 100%;
	}
	
	.telephone {
		background-color: #57adeb;
		color: #fff;
		width: 45%;
	}
	
	.options {
		/* padding: 75px 0; */
		display: flex;
		justify-content: space-around;
		margin: 4vh auto;
		width: 60%;
	}
	
	.box {
		text-align: center;
		border-radius: 8px;
		/* height: 200px; */
		width: 6em;
		font-size: 12px;
		border: 2px solid #cccccc;
		background-color: #fff;
		color: #666666;
	}
	
	.icon_boxFather {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.li-box-query {
		width: 100%;
		height: 50px;
		line-height: 50px;
		display: flex;
	}
	
	.qu-left {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.qu-val {
		padding: 25px 0px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.qu-val>span.qu-val-or {
		color: #999;
		font-size: 14px;
		height: 20px;
		line-height: 20px;
		padding: 5px 50px;
		background: #fff;
		border-radius: 3px;
	}
	
	.qu-left>span {
		display: block;
		width: 100%;
		height: 1px;
		background: #e5e5e5;
	}
	
	.orderCounts {
		background-color: rgb(229, 28, 35);
		height: 9px;
		width: 9px;
		border-radius: 16px;
		position: absolute;
		right: -2px;
		top: -2px;
		font-size: 14px;
	}
	
	.cartCounts {
		display: inline-block;
		min-width: 10px;
		padding: 3px 7px;
		font-size: 12px;
		font-weight: 700;
		line-height: 1;
		color: #fff;
		text-align: center;
		white-space: nowrap;
		vertical-align: middle;
		border-radius: 10px;
		background-color: #ea3325;
		position: absolute;
		right: -10px;
		top: -9px;
	}
	/* .icon_box {
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 90px;
} */
	
	.winfloat {
		padding: 20px 0;
		display: flex;
		border-bottom: solid 1px #e5e5e5;
		align-items: center;
		font-size: 24px;
	}
	
	.close {
		color: #039ecb;
		padding: 20px 0;
		text-align: center;
		border-bottom-left-radius: 16px;
		border-bottom-right-radius: 16px;
	}
	
	.item-content:active {
		background-color: #f7f7f7;
	}
	
	.bankMessage1 {
		color: #999;
		font-size: 12px;
		position: relative;
		top: -10px;
		background: #f3f3f3;
	}
	
	input-placeholder {
		font-size: 28px;
	}
</style>
>
<style lang="scss" scoped>
	.header {
		justify-content: flex-end;
		height: 52px;
		background-color: #f8f8f8;
		display: flex;
		align-items: center;
		position: fixed;
		z-index: 100;
		left: 0;
		top: 0;
		padding: 0px;
		width: 100%;
	}
	
	.infoBox {
		border-top: 1px solid rgb(238, 238, 238);
		font-size: 14px;
		display: flex;
		align-items: center;
		height: 60px;
	}
	
	.iconBox {
		border-right: 1px solid rgb(238, 238, 238);
		height: 70%;
		display: flex;
		align-items: center;
		width: 55px;
	}
	
	.textBox {
		flex: 1;
		color: #9e9e9e;
		font-size: 12px;
		margin: 10px;
	}
	
	.imgInfo {
		width: 100%;
		display: flex;
		justify-content: space-around;
		color: #878787;
		margin: 10px 0;
		font-size: 12px;
	}
	
	.overFont {
		// overflow: hidden;
		// white-space: nowrap;
		font-size: 12px;
	}
	
	.isHidden {
		display: none;
	}
	
	.ifClass3 {
		border-bottom: 1px solid rgb(238, 238, 238);
	}
	
	.modiaBtn {
		padding: 5px;
	}
	
	.imgBtn {
		-webkit-box-shadow: 0 0 10px rgba(103, 103, 103, 0.5);
		-moz-box-shadow: 0 0 10px rgba(103, 103, 103, 0.5);
		box-shadow: 0 0 10px rgba(103, 103, 103, 0.5);
		border: (1px solid #ddd);
	}
	
	.modiaBoxDw {
		height: 200px;
		animation: mybox 0.5s;
		-moz-animation: mybox 0.5s;
		/* Firefox */
		-webkit-animation: mybox 0.5s;
		/* Safari and Chrome */
		-o-animation: mybox 0.5s;
		/* Opera */
	}
	
	@keyframes mybox {
		from {
			height: 200px;
		}
		to {
			height: 0px;
		}
	}
	
	.isHeight {
		height: 100%;
	}
	
	.isWidth {
		width: 100%;
	}
	
	.pictHeight {
		height: 250px;
	}
	
	.pictWidth {
		width: 250px;
	}
	
	.modiaBoxUp {
		height: 0px;
		animation: myfirst 0.5s;
		-moz-animation: myfirst 0.5s;
		/* Firefox */
		-webkit-animation: myfirst 0.5s;
		/* Safari and Chrome */
		-o-animation: myfirst 0.5s;
		/* Opera */
	}
	
	@keyframes myfirst {
		from {
			height: 0px;
		}
		to {
			height: 200px;
		}
	}
	
	.croppa-container {
		background-color: #000;
	}
	
	.croppa-container:hover {
		opacity: 1;
		background-color: #000;
	}
	
	.productBox1 {
		display: flex;
		overflow: hidden;
	}
	
	.productBox1:active {
		background-color: #e3e3e3;
	}
	
	.productBox {
		width: 50%;
		height: 220px;
		float: left;
		overflow: hidden;
	}
	
	.productBox:active {
		opacity: 0.5;
	}
	
	.telephone {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10px 0;
		border-radius: 8px;
		background-color: #57adeb;
		color: #fff;
		width: 45%;
	}
	
	.box {
		text-align: center;
		border-radius: 8px;
		width: 20%;
		font-size: 14px;
		border: 1px solid #bbb;
		background-color: #fff;
	}
	
	.justcont {
		display: flex;
		justify-content: center;
	}
	
	.icon_box {
		position: relative;
		border-radius: 8px;
		margin: 10px 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 45px;
		height: 45px;
	}
	
	.queryCar {
		padding: 4px 0;
		font-size: 14px;
		width: 80%;
		background-color: #fff;
		border-radius: 8px;
		border-color: #ccc !important;
	}
	
	.bg_shop1 {
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 0;
		z-index: 999;
		background-color: rgba(0, 0, 0, 0.498039);
		height: 100%;
		width: 100%;
		font-size: 14px;
	}
	
	.stateMent {
		margin: 10px 30px;
		color: #1973bf;
		background: url("");
		background-size: 100% 100%;
	}
</style>

<!-- Add "scoped" attribute to limit CSS to this component only -->